<template>
    <div class="login-container">
        <!-- 导航栏 -->
        <van-nav-bar
        class="page-nav-bar"
        title="登录"
        >
        <!-- 自定义左侧图标插槽 -->
        <template #left >
            <i class="toutiao toutiao-guanbi" @click="$router.back()"></i>
        </template>
        </van-nav-bar>
        <!-- /导航栏 -->
        <!-- 登陆表单 -->
        <van-form @submit="onSubmit" ref="loginForm">
            <van-field
                v-model="user.mobile"
                name="mobile"
                placeholder="请输入手机号"
                :rules="userFormRules.mobile"
                maxlength="11"
            >
            <!-- 具名插槽，字体图标 -->
            <template #left-icon>
                <i class="toutiao toutiao-shouji"></i>
            </template>
            </van-field>
            <van-field
                v-model="user.code"
                name="code"
                placeholder="请输入验证码"
                type="number"
                :rules="userFormRules.code"
                maxlength="6"
            >
             <template #left-icon>
                <i class="toutiao toutiao-yanzhengma"></i>
            </template>
            
            <template #button>
                <!-- 倒计时 -->
                <van-count-down 
                :time="1000*5"
                format="ss 秒后重新获取"
                v-if="countdown"
                 @finish="countdown =false"
                 />
                 <!-- 发送验证码 -->
                <van-button 
                v-else
                size="small" 
                round 
                type="default" 
                class="send-sms-btn"
                native-type="button"
                @click="btnsend"
                >发送验证码</van-button>
            </template>
            </van-field>
                <div class="login-btn-wrap">
                     <div class="login-btn">
                        <van-button  block type="info" native-type="submit">登录</van-button>
                    </div>
                </div>
        </van-form>
        <!-- /登陆表单 -->

        
    </div>
</template>

<script>
// 1.导入用户相关的请求接口
import {login,sendSms} from '@/api/user.js'

export default {
    // 组件名
  name: 'loginindex',
  props: {},
  components: {},
  data () {
   return {
    countdown:false, // 倒计时 默认为false
       user:{
           mobile:'',
           code:'',
          
       },
       // 表单验证
       userFormRules:{
           mobile:[
               {required:true,message:'内容不能为空'},
               { pattern:/^1[3|5|7|9]\d{9}$/, message: '手机号格式不正确' }
               ],
           code:[
                {required:true,message:'内容不能为空'},
                { pattern:/^\d{6}$/, message: '验证码格式不正确' }
           ]
       },
       
   }
  },
  computed: {},
  watch: {},
  methods: {
    // - 注册点击登录的事件
    // - 获取表单数据（根据接口要求使用 v-model 绑定）
    // - 表单验证
    // - 发请求提交
    // - 根据请求结果做下一步处理
      async onSubmit() {

          this.$toast.loading({
            message: '登录中...',
            forbidClick: true, // 禁用点击背景
            duration:0 // 持续时间为0，弹框不会消失
            });

            // 登录成功执行的代码
          try {
              const res = await login(this.user)
                this.$toast.success('登录成功');
              console.log(res.data.data);
              // 登录成功后，将token存入vuex的 setUser 方法中
              this.$store.commit('setUser',res.data.data);
              // 路由跳转到 我的 页面
              this.$router.push('/my')

             // 登录失败执行的代码
          } catch (err) {
              console.log(err);
              // 判断错误类型
              if(err.response.status === 400) {
                    this.$toast.fail('手机号或验证码错误');
              }else {
                    this.$toast.fail('登录失败，请重试');
              }
          }
    },
        async btnsend(){
            // 1.校验手机号
            try{
                await this.$refs.loginForm.validate('mobile') //调用validate手动校验
                console.log('验证成功');
            }catch (err) {
                return console.log('验证失败',err);
            }
            // 2. 验证通过，显示倒计时
            this.countdown = true  
            // 3.请求发送验证码
            try {
              const res = await sendSms(this.user.mobile)
              console.log(res);
              this.$toast.success('发送成功');
            }catch (err) {
                // 发送失败，关闭倒计时
                this.countdown = false
                // console.log(err);
                if(err.response.status === 429) {
                    this.$toast('发送过于频繁，请一分钟后再试')
                }else {
                    this.$toast('发送失败，请稍后重试')
                }
            }
    },
  created () {
      console.log(this);
  },

}
}
</script> 

<style scoped lang="less">
    .toutiao {
        font-size:37px
    };
    .send-sms-btn {
        width: 162px;
        height: 46px;
        line-height: 46px;
        background-color: #ededed;
        font-size: 22px;
        color: #666;
    }
    .login-btn-wrap {
        padding:53px 33px;
    };
    .login-btn {
        background-color:  #6db4fb;
        border: none;

    }
</style>